<template>
  <div>
  <van-swipe 
    ref="s"
    class="my-swipe" 
    :autoplay="5000"
    :duration="3000" 
    indicator-color="red" 
    @change="changeHandle"
  >
    <van-swipe-item v-for="(item,index) in imgs" :key="index" @click="goUrl(index)">
      <img :src="item" >
    </van-swipe-item>
  </van-swipe>
  <!-- <van-button @click="fn">跳转到第四页</van-button> -->
</div>
</template>  
<script>
import axois from "axios";
import axios from 'axios';

export default {
  name: "Banner",
  data(){
    return {
      imgs:[],
      urls:[
        "https://www.baidu.com",
        "https://www.1000phone.com",
        "https://www.jd.cn",
        "https://www.taobao.com"
      ]
    }
  },
  created(){
    // axios.get("http://localhost:3000/bannerImgs")
    // .then(res=>{
    //   // res.data:是后端响应回来的数据，自动做了json的对象的转换
    //   if(res.data.status==="success"){
    //     this.imgs = res.data.data;
    //   }
    // })

    // axois({
    //   url:"http://localhost:3000/bannerImgs"
    // })
    // .then(res=>{
    //   // res.data:是后端响应回来的数据，自动做了json的对象的转换
    //   if(res.data.status==="success"){
    //     this.imgs = res.data.data;
    //   }
    // })
  },
  methods:{
    changeHandle(index){
      console.log("index",index);
    },
    goUrl(idx){
      location.href=this.urls[idx];
    },
    fn(){
      this.$refs.s.swipeTo(3)
    }
  }
};
</script>
  
<style scoped>
.my-swipe{
  width: 100%;
  height: 12.5rem;
  background-color: skyblue;
}

img{
  width: 100%;
  height: 100%;
}
</style>